<template>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>薪资：{{ job.salary }}</h2>
    <button @click="name += '!'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.salary++">修改薪资</button>
    <p style="text-align: left;border-top: 1px solid #000;">
        toRef: 可以基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
        <hr>
        toRefs: 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
    </p>
</template>

<script lang="ts">
import { reactive,toRef,toRefs} from 'vue'

export default {
    name: 'ref_refs',
    setup() {

        // 数据（响应式）
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                salary: 12
            }

        })

        return {
            person,
            // name:toRef(person,'name')
            
            // 下面的写法是将 person 中的所有一级属性全部转为响应式数据返回
            ...toRefs(person)
        }
    }
} 
</script>
<style></style>